<template>
	<view class="merchant">
		<view class="merchant-ul">
			<view class="merchant-top">
				<view class="merchant-ol">
					<view class="merchant-li">
						<image src="../../static/image/icon-shoping.png" mode=""></image>
						<view class="font-cliss">
							<text>靠谱商品</text>
						</view>
					</view>
					<view class="font-text" @click="potse">
						<text>查看更多 ></text>
					</view>
				</view>
			</view>
			<view class="merchant-flex">
				<view class="merchant-center-ul" v-for="(item,index) in merchant">
					<view class="merchant-flex-li" :class="item.image ? 'background-white' : '' ">
						<text v-if="item.image ? false : true">{{item.if}}</text>
						<image :src=" '/static/image/' + item.image + '.png' "></image>
					</view>
					<view class="merchant-flex-lo">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchant: [{
						id: 1,
						image: 'logo',
						if: "空位招租",
						name: "汾酒"
					},
					{
						id: 2,
						image: 'qidong',
						if: "空位招租",
						name: "汾酒"
					},
					{
						id: 3,
						image: '',
						if: "空位招租",
						name: "汾酒"
					},
					{
						id: 4,
						image: '',
						if: "空位招租",
						name: "汾酒"
					},
					{
						id: 5,
						image: '',
						if: "空位招租",
						name: "汾酒"
					},

				]
			}
		},
		methods:{
			potse(){
				uni.navigateTo({
					url:'/pages/index/goodproduct'
				})
				console.log("414")
			}
		}
	}
</script>

<style lang="less" scoped>
	.merchant {
		margin: 5rpx 30rpx;

		.merchant-ul {
			width: 700rpx;
			margin: 0 auto;

			.merchant-top {
				display: flex;
				justify-content: space-between;

				.merchant-ol {
					display: flex;
					align-items: center;
					.merchant-li {
						background-image: url(../../static/image/icon-syzs.png);
						background-repeat: no-repeat;
						background-size: 224rpx 24rpx;
						display: flex;
						background-position: bottom;

						image {
							width: 40rpx;
							height: 40rpx;
							padding: 5rpx 30rpx 0 0;
						}

						.font-cliss {
							text {
								display: block;
								font-size: 37rpx;
								font-family: HYLingXinJ;
								font-weight: bold;
								color: #333333;
							}
						}
					}

					.font-text {
						padding: 0rpx 0rpx 0rpx 30rpx;
						display: block;
						display: flex;
						height: 40rpx;
						align-items: center;
						text {
							display: block;
							margin-top: 5rpx;
							font-size: 21rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.merchant-flex {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.merchant-center-ul {
					margin-left: 15rpx;
					margin-top: 20rpx;

					.merchant-flex-li {
						width: 328rpx;
						height: 400rpx;
						background-color: #DDDDDD;
						border-radius: 13px;
						text-align: center;
						line-height: 400rpx;
						position: relative;
						overflow: hidden;

						text {
							width: 328rpx;
							font-size: 32rpx;
							font-family: zcoolwenyiti;
							font-weight: 400;
							color: #333333;
							position: absolute;
						}

						image {
							width: 328rpx;
							height: 380rpx;
						}
					}
					.background-white{
						background-color: #ffffff;
						border: 1px solid #DDDDDD;
					}
					.merchant-flex-lo {
						text-align: center;
						margin-top: 20rpx;

						text {
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
						}
					}

				}
			}
		}
	}
</style>
